<template>
    <div class="forgetPawPage">
        <div>
            <div class="from">
                <div class="form">
                    <div class="errfrom" v-show="isErr">
                        <div>
                            <i class="el-icon-error"></i>
                            <span class="errMsg">{{ errMsg }}</span>
                        </div>
                        <div>
                            <i
                                class="el-icon-close close"
                                @click="closeErrMsg"
                            ></i>
                        </div>
                    </div>
                    <!-- 步骤一 -->
                    <div>
                        <div class="form-item">
                            <input
                                type="text"
                                name="username"
                                placeholder="手机号"
                                v-model="forgetFrom.phone"
                            />
                        </div>
                        <div class="phone-login-row">
                            <div class="form-item-phone">
                                <input
                                    type="text"
                                    name="password"
                                    placeholder="输入验证码"
                                    v-model="forgetFrom.verificationCode"
                                />
                            </div>
                            <div
                                @click="getForgetCode"
                                v-if="showGetCode"
                                class="visBtn-green"
                            >
                                获取验证码
                            </div>
                            <div class="visBtn countTime" v-else>
                                <i class="el-icon-loading tranIcon"></i
                                >{{ count }}
                            </div>
                        </div>
                        <div class="subMsg">
                            由于运营商的原因，手机短信可能会有延迟，请您耐心等待
                        </div>
                        <div class="form-item" style="margin-bottom: 12px;">
                            <input
                                type="password"
                                name="password"
                                placeholder="请输入新密码"
                                v-model="forgetFrom.password"
                            />
                        </div>
                        <div class="passwordTips">
                            最少8位，至少包含一个大写字母，一个小写字母和一个数字
                        </div>
                        <div class="form-item">
                            <input
                                type="password"
                                name="password"
                                placeholder="请再次输入新密码"
                                v-model="forgetFrom.secondPassword"
                            />
                        </div>
                    </div>
                    <div class="loginBtn" @click="nextStep">
                        提交
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getRegisterCode } from "@/api/register";
import { toForGetPaw } from "@/api/forgetPassWord";
import { Base64 } from "js-base64";
import CryptoJS from "crypto-js";
export default {
    data() {
        return {
            isErr: false, //账户密码错误
            errMsg: "错误消息", //错误消息
            count: 0,
            timer: null,
            showGetCode: true, //获取验证码
            forgetFrom: {
                phone: "",
                verificationCode: "",
                password: "",
                secondPassword: ""
            }
        };
    },
    methods: {
        checkPageType(type) {
            this.$emit("checkPageType", type);
        },
        closeErrMsg() {
            this.isErr = false;
        },
        checkPhone(phone) {
            if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone)) {
                return false;
            } else {
                return true;
            }
        },
        //成功倒计时
        countdown() {
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.showGetCode = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.showGetCode = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000);
            }
        },
        getForgetCode() {
            var phone = this.forgetFrom.phone.trim();
            var check = this.checkPhone(phone);
            if (!check) {
                this.errMsg = "请填写正确的手机号码";
                this.isErr = true;
                return;
            }
            this.getCodeTime();
            this.isErr = false;
        },
        //获取手机验证码
        async getCodeTime() {
            var getCodeData = await getRegisterCode({
                phone: this.forgetFrom.phone,
                code_type: "retrieveps_code"
            });
            console.log("====================================");
            console.log(getCodeData);
            console.log("====================================");
            if (getCodeData.code === 200) {
                this.$message({
                    message: "已发送验证码",
                    customClass: "customClass",
                    type: "success"
                });
                this.countdown();
                setTimeout(() => {
                    this.isSend = false;
                }, 60000);
            } else {
                this.$message.error("验证码发送失败");
                this.$alert(getCodeData.msg, "提示", {
                    confirmButtonText: "确定",
                    callback: () => {}
                });
            }
        },
        async nextStep() {
            var phone = this.forgetFrom.phone.trim();
            var check = this.checkPhone(phone);
            if (!check) {
                this.errMsg = "请填写正确的手机号码";
                this.isErr = true;
                return;
            } else if (this.forgetFrom.verificationCode == "") {
                this.errMsg = "验证码不能为空";
                this.isErr = true;
                return;
            }
            if (this.forgetFrom.password.trim().length < 8) {
                this.errMsg = "密码长度不得小于8位";
                this.isErr = true;
                return;
            }
            if (
                /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(
                    this.forgetFrom.password.trim()
                )
            ) {
                console.log("密码符合规定");
            } else {
                this.errMsg = "密码格式不正确";
                this.isErr = true;
                return;
            }
            if (
                this.forgetFrom.password.trim() !=
                this.forgetFrom.secondPassword.trim()
            ) {
                this.errMsg = "两次密码输入不一致";
                this.isErr = true;
                return;
            }
            this.isErr = false;
            let reqObj = {
                phone: this.forgetFrom.phone,
                pwd: this.getDES(this.forgetFrom.password),
                verification_code: this.forgetFrom.verificationCode
            };
            var forgetData = await toForGetPaw(reqObj);
            console.log("====================================");
            console.log(forgetData);
            console.log("====================================");
            if (forgetData.code === 200) {
                this.$alert(forgetData.msg, "提示", {
                    confirmButtonText: "确定",
                    callback: () => {
                        this.checkPageType("PasswChangedSucc");
                    }
                });
            } else {
                this.$alert(forgetData.msg, "提示", {
                    confirmButtonText: "确定",
                    callback: () => {}
                });
            }
        },
        getDES(password) {
            //加密
            var key = "97498121231284655fsafasa"; //密钥
            var iv = "kfao5417";
            var encrypted = this.getDesString(password, key, iv); //密文
            return Base64.encode(encrypted);
        },
        getDesString(data, key, iv) {
            //加密
            var C_key = CryptoJS.enc.Utf8.parse(key);
            var C_iv = CryptoJS.enc.Utf8.parse(iv);
            var encrypted = CryptoJS.DES.encrypt(data, C_key, {
                iv: C_iv, //向量  偏移量
                mode: CryptoJS.mode.CBC, //加密模式
                padding: CryptoJS.pad.Pkcs7 //填充模式 补位
            });
            return encrypted.toString(); //返回的是base64格式密文
        }
    }
};
</script>

<style scoped lang="scss">
@import "./mixin.css";

/* 找回密码 */
.forgetPawPage {
    width: 650px;
    margin: 0 auto;
    margin-top: 28px;

    .form {
        width: 400px;
        margin: 0 auto;
        position: relative;
    }

    .dragBox {
        margin-bottom: 24px;
    }

    .phone-login-row {
        margin-bottom: 0;
    }

    .loginBtn {
        margin-top: 24px;
    }

    .subMsg {
        height: 20px;
        font-size: 14px;
        line-height: 20px;
        color: #9ea4b0;
        text-align: center;
        margin-bottom: 24px;
    }

    .loginBtn {
        width: 100%;
        height: 40px;
        text-align: center;
        font-size: 16px;
        color: #ffffff;
        line-height: 40px;
        background: #9ea4b0;
        opacity: 1;
        border-radius: 20px;
        cursor: pointer;
        margin-bottom: 24px;

        &:hover {
            opacity: 0.8;
        }
    }
}
</style>
